<template>
    <div class="border-box">
        <div class="list-items">
            <span class="select-type">{{selectType}}</span>
            <span>
                <span class="item" v-for="item in selectContent" :key="item.index" @click="getSelectInfo(item)">
                    {{item.item}}
                </span>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "BorderBox",
        props: {
            selectType: {
                type: String
            },
            selectContent: Array
        },
        methods: {
            getSelectInfo: function (item) {
                this.$emit('queryHouse', item)
            }
        }

    }
</script>

<style scoped>
    .border-box .list-items
    {
        width: 100%;
        height: 40px;
        border: 1px solid #E6E6E6;
        line-height: 40px;
    }
    .select-type {
        margin-left: 10px;
        font-size: 13px;
        color: dimgrey;
    }
    .item{
        font-size: 13px;
        font-weight: 700;
        margin-left: 25px;
        color: black;
    }
    .item:hover {
        color: #00C2B3;
    }
</style>
